<template>
    <div class="detail-wrapper">
      <el-dialog
        title="车辆信息"
        class="tableDialog"
        :visible.sync="detailVisible">
          <div class="title">{{this.truckNumber}}</div>
        <div class="detail">
          <table class="detail-table" cellspacing="0" cellpadding="0">
            <tr>
              <td class="table-title">车轴类型</td>
              <td class="table-content"><span v-if="viewForm.axle!==undefined">{{this.viewForm.axle.axle}}</span></td>
              <td class="table-title">油/气</td>
              <td class="table-content"></td>
            </tr>
            <tr>
              <td class="table-title">固定皮重</td>
              <td class="table-content">{{this.viewForm.tareWeight}}</td>
              <td class="table-title">标准载重</td>
              <td class="table-content"><span v-if="viewForm.axle!==undefined">{{this.viewForm.axle.maxGross}}</span></td>
            </tr>
              <tr>
                  <td class="table-title">运输许可证</td>
                  <td class="table-content">{{this.viewForm.transportPermitNumber}}</td>
                  <td class="table-title">行驶证</td>
                  <td class="table-content">{{this.viewForm.vehicleLicenseNumber}}</td>
              </tr>
              <tr>
                  <td class="table-title">车主姓名</td>
                  <td class="table-content"><span v-if="viewForm.company!==undefined">{{this.viewForm.company.names}}</span></td>
                  <td class="table-title">车主手机号</td>
                  <td class="table-content"><span v-if="viewForm.company!==undefined">{{this.viewForm.company.phone}}</span></td>
              </tr>
              <tr>
                  <td class="table-title">车主证件号</td>
                  <td class="table-content"><span v-if="viewForm.company!==undefined">{{this.viewForm.company.idCard}}</span></td>
                  <td class="table-title">黑名单</td>
                  <td class="table-content">
                    <span v-if="viewForm.blackFlag === true">是</span>
                    <span v-if="viewForm.blackFlag === false">否</span>
<!--                    <el-checkbox v-model="viewForm.blackFlag">黑名单</el-checkbox>-->
<!--                    <el-checkbox v-model="viewForm.truckTypeFlag">自卸</el-checkbox>-->
                  </td>
              </tr>
          </table>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import { getDetail } from '@/api/transport/transport.js'
    export default {
      name: 'details',
      data () {
        return {
          detailVisible: false,
          truckNumber: '',
          viewForm: {
              blackFlag: '',
              truckTypeFlag: ''
          }
        }
      },
      methods: {
        init (method, row) {
          if (method === 'detail') {
            this.detailVisible = true
            this.truckNumber = row
              getDetail({truckNumber:this.truckNumber}).then(({data}) => {
                  if (data.code === '200') {
                      this.viewForm = data.result
                  } else {
                      this.viewForm = {}
                  }
              })
          }
        }
      }
    }
</script>

<style lang="scss" scoped>
  .detail-wrapper{
    ::v-deep.el-dialog{
      .el-dialog__body{
        .title{
          margin-bottom: 10px;
        }
        .detail-table{
          border: 1px solid #DDDDDD;
          border-bottom: none;
          td{
            padding: 12px 10px;
            border-right: 1px solid #DDDDDD;
            border-bottom: 1px solid #DDDDDD;
          }
          .table-title{
            width: 125px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
          }
          .table-content{
            width: 260px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;

            span:first-child{
              margin-right: 20px;
            }
          }
        }
      }
    }

  }
</style>
